<template>
	<view>
		<view class="header">
			<text class="iconfont icon-xiangzuojiantou" @click="back"></text>
			<text>确认订单</text>
		</view>
		<view class="content">
			<view class="address">
				<text class="iconfont icon-dizhi"></text>
				<view class="addressCenter">
					<view @click="skipchangeAddress">
						收货人：{{fukuan.ryshpe}} {{fukuan.ryshtel}}
					</view>
					<view @click="skipchangeAddress">
						收货地址：{{fukuan.tzdz}}
					</view>
				</view>
				<text @click="skipchangeAddress" class="iconfont icon-youjiantou"></text>
			</view>
			<view class="guodu">
			</view>
			<view class="goods">
				<view class="item">
					<view>
						<image mode="widthFix" :src="IP+fukuan.yp_imgsrc"></image>
					</view>
					<view class="itemRight">
						<view class="itemRightHeader">
							<view>
								<!-- <image src="../../static/image/logo.png" mode="widthFix"></image> -->
							</view>
							<view><text>{{fukuan.yp_mingcheng}}</text></view>
						</view>
						<view class="guige">
							规格：{{fukuan.yp_guige}}
						</view>
						<view class="itemRightFooter">
							<view>￥{{fukuan.pt_tuangoujiage}}</view>
							<view>
								<text>×{{fukuan.yaopinshuliang}}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="youhuiquan">
				<view>优惠券</view>
				<view>
					<text>无可用</text>
					<text class="iconfont icon-youjiantou"></text>
				</view>
			</view>
			<view class="baozhuang">
				<view>选择私密包装</view>
				<view>
					<switch checked @change="switch1Change" />
				</view>
			</view>
			<view class="jiage">
				<view>
					<view>商品金额</view>
					<text>￥{{fukuan.pt_tuangoujiage}}</text>
				</view>
				<view>
					<view>运费</view>
					<text>￥{{fukuan.yp_yunfei}}</text>
				</view>
			</view>
			<view class="zhifu">
				<view>支付方式</view>
				<view>
					<view>
						<text class="iconfont icon-weixinzhifu"></text>
						<text>微信支付</text>
					</view>
					<view>
						<radio :checked="selecradio==1?true:false" @click="radioChange(1)"/>
					</view>
				</view>
				<view>
					<view>
						<text class="iconfont icon-zhifu-_zhifubaozhifu"></text>
						<text>支付宝支付</text>
					</view>
					<view>
						<radio :checked="selecradio==2?true:false" @click="radioChange(2)"/>
					</view>
				</view>
			</view>
			<!-- 站位空白 -->
			<!-- <view class="kongbai"></view> -->
			<view class="footer">
				<text>总价：<text>￥{{total}}.00</text></text>
				<view>
					<button type="default" @click="tijiao">提交订单</button>
				</view>
				
			</view>
		</view>
	</view>
</template>

<script>
	import {reactive,toRefs,computed,onMounted} from 'vue'
	import {useStore} from 'vuex'
	import http from '../../utils/http.js'
	import store from '../../store/index.js'
	let shopData
	export default {
		onLoad(option) {
			shopData = JSON.parse(option.shop)
			console.log(shopData)
		},
		setup(){
			const {state,getters,commit,dispatch} = useStore();
			let data=reactive({
				dataShow:shopData,
				IP:computed(()=>state.IP),
				selecradio:1,
				skipchangeAddress(){
					uni.navigateTo({
						url:'/pages/ptxqdizhi/ptxqdizhi'
					})
				},
				// 返回
				back(){
					uni.redirectTo({url:'/pages/ptdaizhifu/ptdaizhifu'})
				},
				// 开关
				switch1Change(e){
					console.log('switch1 发生 change 事件，携带值为', e.detail.value)
				},
				// 使用数据
				fukuan:computed(()=>state.ptdingdan.fukuan),
				total:computed(()=>state.ptdingdan.total),
				// let total=parseFloat(e.pt_tuangoujiage*e.ptdd_shuliang+e.yp_isMianfei)
				// data.total=parselnt(fukuan.pt_tuangoujiage+fukuan.yp_isMianfei)
				// 单选
				radioChange(e){
					// console.log(e)
					data.selecradio=e
				},
			
				tijiao(){
					let id=data.fukuan
					console.log(id)
					uni.showModal({
						// title: '提示',
						content: '确认支付',
						success: function (res) {
							// console.log(res)
							if (res.confirm) {
								// console.log('用户点击确定');
								uni.redirectTo({
									url:'/pages/ktcg/ktcg'
								});
								http({
									url:'/ptdingdantijiao',
									method:'post',
									data:{
										id:id.ptdd_id
									}
								}).then((res)=>{
									// console.log(res.data.data)
									// data.get()
									// console.log(111)
								})
								
							} else if (res.cancel) {
								// console.log('用户点击取消');
							}
						}
					});
				}
			})
			onMounted(()=>{
				// data.IP=store.state.IP
				commit('ptdingdan/see',data.fukuan)
				// console.log(data.fukuan)
			})
			return {...toRefs(data)}
		},
	}
</script>

<style lang="less">
	@import url("~@/static/fonts/iconfont.css");
	.header {
		padding: 20rpx 30rpx;
		border-bottom: 1rpx solid #efefef;
	}
	.content{
		background-color: #F2F2F2;
	}
	.address{
		background-color: white;
		padding: 20rpx 30rpx;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		align-items: center;
		>text:nth-child(1){
			margin-top: -70rpx;
			padding-left: 30rpx;
		}
		.addressCenter{
			>view:nth-child(2){
				margin-top: 30rpx;
			}
		}
	}
	.chufang{
		background-color: white;
		margin: 15rpx 0;
		padding: 20rpx 30rpx;
		box-sizing: border-box;
	}
	.item {
		background-color: white;
		border-top: 1px solid #F2F2F2;
		border-bottom: 1px solid #F2F2F2;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx 30rpx;
		>view:nth-child(1) {
			padding-left: 15rpx;
			image {
				width: 200rpx;
			}
		}
		.itemRight {
			padding: 10rpx 0;
			flex: 1;
			.itemRightHeader {
				padding-left: 20rpx;
				margin-bottom: 15rpx;
				display: flex;
				justify-content: space-between;
	
				view:nth-child(1) {
					image {
						padding-top: 10rpx;
						width: 25rpx;
					}
				}
				view:nth-child(2) {
					padding-left: 15rpx;
					flex: 1;
				}
			}
			.guige{
				padding-left: 20rpx;
				margin-bottom: 15rpx;
			}
			.itemRightFooter {
				padding-left: 20rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				>view:nth-child(1) {
					flex: 1;
					color: red;
				}
			}
		}
	}
	.guodu{
		background-color: #F2F2F2;
		height: 16rpx;
	}
	.youhuiquan{
		background-color: white;
		padding: 20rpx 30rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin: 15rpx 0;
		>view:nth-child(2){
			text:nth-child(1){
				color: #b6b6b6;
				padding-right: 30rpx;
			}
		}
	}
	.baozhuang{
		background-color: white;
		padding: 20rpx 30rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		switch{
			transform:scale(0.7)
		}
	}
	.jiage{
		background-color: white;
		padding: 0rpx 30rpx;
		box-sizing: border-box;
		margin: 15rpx 0;
		view{
			padding: 10rpx 0;
			display: flex;
			justify-content: space-between;
			align-items: center;
			text{
				color: red;
			}
		}
	}
	.zhifu{
		background-color: white;
		padding: 0rpx 30rpx;
		box-sizing: border-box;
		>view{
			padding: 10rpx 0;
			display: flex;
			justify-content: space-between;
			align-items: center;
			radio{
				transform: scale(0.8);
			}
			.icon-weixinzhifu{
				color: #06C700;
				margin-right: 10rpx;
			}
			.icon-zhifu-_zhifubaozhifu{
				color: #0DA3F4;
				margin-right: 10rpx;
			}
		}
	}
	.footer{
		padding-bottom: 50rpx;
		width: 100%;
		box-sizing: border-box;
		border-top: 1rpx solid #efefef;
		background-color: white;
		padding-left: 30rpx;
		position: fixed;
		bottom: 0;
		display: flex;
		justify-content: space-between;
		align-items: center;
		>text{
			text{
				color: red;
			}
		}
		>view:nth-of-type(1) {
			width: 350rpx;
			button {
				height: 98rpx;
				line-height: 98rpx;
				color: white;
				background-color: red;
				border: 1rpx solid red;
				border-radius: 0;
				font-size: 13px;
			}
		}
	}
	.kongbai {
		height: 116rpx;
		// background-color: red;
	}
</style>
